<template>
    <div class="version">
        <div class="top">
            <el-button @click="$router.push('/addVersion')" type="primary">新增版本</el-button>
            <el-select v-model="value" placeholder="请选择软件类型" style="margin-left: 20px;" @change="getList">
                <el-option
                v-for="(item,index) in versionTypes"
                :key="index"
                :label="index"
                :value="index">
                </el-option>
            </el-select>
        </div>
        <div class="table">
            <el-table
            stripe
            :data="list"
            style="width: 100%">

                <el-table-column
                    prop="versionId"
                    width="120px"
                    label="ID">
                </el-table-column>

                <el-table-column
                    prop="versionKey"
                    width="120px"
                    label="版本号">
                </el-table-column>

                <el-table-column
                    width="120px"
                    label="软件类型">
                    <template slot-scope="scope">
                        <el-tag
                        :type="versionTypes[scope.row.type]"
                        disable-transitions>{{ scope.row.type }}</el-tag>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="downUrl"
                    label="下载链接">
                </el-table-column>

                <el-table-column
                    label="创建时间">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        &nbsp;
                        <span>{{ dayjs(scope.row.createTime).format('YYYY/MM/DD HH:mm:ss') }}</span>
                    </template>
                </el-table-column>

                <el-table-column
                    width="330px"
                    label="操作">
                    <template slot-scope="scope">
                        <div>

                            <el-button
                            @click="">预览</el-button>

                            <el-button
                            type="warning"
                            @click="$router.push('/addVersion?id=' + scope.row.versionId)">
                                修改
                            </el-button>

                            <el-popconfirm
                            style="margin-left: 10px;"
                            icon="el-icon-info"
                            icon-color="red"
                            @confirm="delV(scope.$index, scope.row)"
                            title="确定删除吗？"
                            >
                                <el-button slot="reference" type="danger">删除</el-button>
                            </el-popconfirm>
                        </div>
                    </template>
                </el-table-column>

            </el-table>
        </div>
    </div>
</template>

<script>
import { geVersionList, delVersion } from '@/api/version'
import { mapState } from 'vuex'
export default {
    data() {
        return {
            list : [],
            value : ''
        }
    },
    computed:{
        ...mapState(['versionTypes'])
    },
    created(){
        this.getList()
    },
    methods : {
        getList(value){
            geVersionList({
                type : this.value || undefined
            }).then(res => {
                if(res.code == 200){
                    this.list = res.data
                }
            })
        },
        updateV(){

        },
        delV(index, data){
            delVersion({
                ids :data.versionId
            }).then(res => {
                if (res.code == 200) {
                    this.$message.success('操作成功')
                    this.getList()
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.version{
    padding: 20px;
    background-color: #fff;
    min-height: calc(100vh - 220px);
    .top{
        padding: 20px;
    }
}
</style>